.button-icon {
  @include button-icon-template;

  background-color: transparent;
  outline: none !important;

  &.sm {
    margin: -0.25rem;
    padding: 0.25rem;
  }

  &.md {
    margin: -0.5rem;
    padding: 0.5rem;
  }

  &:disabled,
  &.disabled {
    @include button-icon-disabled-template;

    &.hover-area {
      &:active,
      &:focus,
      &:hover {
        background-color: transparent !important;
        outline: none;
      }
    }
  }

  @each $name, $color in $theme-colors {
    &.hover-icon-light-color-#{$name} {
      &:focus,
      &:active,
      &:hover {
        outline: none;

        > svg {
          path {
            fill: mix($white, $color, 26%) !important;
          }
        }
      }

      &:disabled {
        > svg {
          path {
            fill: $gray-500 !important;
          }
        }
      }
    }

    &.hover-icon-area-color-#{$name} {
      &:focus,
      &:active,
      &:hover {
        outline: none;
        background-color: rgba($color, $alphaBackgroundColor);
        border-radius: 50%;

        > svg {
          path {
            fill: $color !important;
          }
        }
      }

      &:disabled {
        > svg {
          path {
            fill: $gray-500 !important;
          }
        }
      }
    }
  }
}

.button-icon-badge {
  position: relative;

  .badge {
    position: absolute;
    left: 16px;
    top: 12px;
  }
}

.button-icon-terminal {
  background-color: $white;
  outline: none !important;
  border: 1px solid $lightSapphire;
  box-shadow: $dropshadow-24;
  border-radius: 80px;
  padding: 7px;

  &:active,
  &:focus,
  &:hover {
    background-color: mix($white, rgba($primary, 0.8), 75%);

    outline: none;
    box-shadow: none;

    > svg {

      path {
        fill: $primary !important;
      }
    }
  }

  &:disabled,
  &.disabled {
    background-color: $white;
    outline: none;
    opacity: 0.25;
    box-shadow: $dropshadow-24;
    cursor: default;

    > svg {
      path {
        fill: $gray-600 !important;
      }
    }
  }
}
